<template>
	<view class="wanlpage-groups" :style="[pageData.style]" v-if="data.length > 0">
		<view
			class="wanlpage-groups__mian"
			:class="[`col-3-${pageData.params.colmargin}`]"
			:style="{ backgroundImage: `url(${$wanlshop.oss( pageData.params.groupsBackground, 0, 50, 1, 'transparent', 'png' )})` }"
		>
		
			<view class="flex justify-between align-center">
				<view class="server">
					<view class="heads">
						<view class="title">
							<text class="margin-right-sm text-bold">
								限时团购
								<image :src="$wanlshop.oss('/uploads/staticImage/images/default/title.png')" mode="widthFix"></image>
								
							</text>
						</view>
					</view>
				</view>
				<view class="text-gray text-sm margin-right-sm" @tap="handleGroups">
					<text class="">更多</text>
					<text class="wlIcon-fanhui2"></text>
				</view>
			</view>
			<!-- <view class="head">
				<view class="title">
					<text
						:style="{ color: pageData.params.titleColor, fontSize: pageData.params.titleFontSize }"
						class="margin-right-sm text-bold"
					>
						{{ pageData.params.titleText }}
					</text>
					<text :style="{ color: pageData.params.infoColor, fontSize: pageData.params.infoFontSize }" >
						{{ pageData.params.infoText }}
					</text>
				</view>
				<view class="text-gray text-sm" @tap="handleGroups">
					<text class="margin-right-xs">更多</text>
					<text class="wlIcon-fanhui2"></text>
				</view>
			</view> -->
			<view class="list">
				<block v-for="(item, index) in data">
					<view class="item bg-white" :key="item.id" @tap="handleGoods(item.id)" v-if="index < 3">
						<image :src="$wanlshop.oss(item.image, 100, 100)" mode="aspectFill"></image>
						<view class="text-cut text-sm padding-lr-xs">{{item.title}}</view>
						<!-- <view class="text-cut text-orange text-xs padding-lr-xs">{{item.description}}</view> -->
						<view class="flex align-center justify-between margin-top-xs padding-lr-xs">
							<text class="text-price text-lg text-orange">{{item.price}}</text>
							<text class="cu-tag round sm wanl-bg-orange">拼</text>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	name: 'WanlPageGroup',
	props: {
		pageData: {
			type: Object,
			default: function() {
				return {
					name: '拼团组件',
					type: 'groups',
					params: {
						colmargin: "25",
						groupsBackground: "",
						infoColor: "#999999",
						infoFontSize: "12px",
						infoText: "拼着买，更便宜~",
						titleColor: "#333333",
						titleFontSize: "14px",
						titleText: "限时团购",
					},
					style: {
						borderRadius: "20rpx",
						margin: "25rpx 0 0 0",
						overflow: "hidden"
					},
					data: [{
						title: "自动获取商品"
					}]
				};
			}
		},
		shopData: {
			type: Object,
			default () {}
		}
	},
	data() {
		return {
			data: []
		};
	},
	created() {
		this.loadData();
	},
	methods: {
		async loadData() {
			await uni.request({
				url: '/wanlshop/page/groups',
				data: {
					shop_id: this.shopData ? this.shopData.id : 0
				},
				success: res => {
					this.data = res.data;
				}
			});
		},
		handleGoods(id) {
			this.$wanlshop.to(`/pages/apps/groups/goods?id=${id}`);
		},
		handleGroups(){
			this.$wanlshop.to(`/pages/apps/groups/index`);
		}
	}
};
</script>

<style lang="scss">
.wanlpage-groups {
	&__mian {
		background-repeat: no-repeat;
		background-size: 100% auto;
		&.col-3-10 {
			.head {
				padding: 0 10rpx;
			}
			.list {
				padding: 0 10rpx;
				.item {
					width: calc((100% - 20rpx) / 3);
					margin-bottom: 10rpx;
				}
			}
		}
		&.col-3-15 {
			.head {
				padding: 0 15rpx;
			}
			.list {
				padding: 0 15rpx;
				.item {
					width: calc((100% - 30rpx) / 3);
					margin-bottom: 15rpx;
				}
			}
		}
		&.col-3-20 {
			.head {
				padding: 0 20rpx;
			}
			.list {
				padding: 0 20rpx;
				.item {
					width: calc((100% - 40rpx) / 3);
					margin-bottom: 20rpx;
				}
			}
		}
		&.col-3-25 {
			.head {
				padding: 0 25rpx;
			}
			.list {
				padding: 0 25rpx;
				.item {
					width: calc((100% - 50rpx) / 3);
					margin-bottom: 25rpx;
				}
			}
		}
		&.col-3-30 {
			.head {
				padding: 0 30rpx;
			}
			.list {
				padding: 0 30rpx;
				.item {
					width: calc((100% - 60rpx) / 3);
					margin-bottom: 30rpx;
				}
			}
		}

		.head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 85rpx;
			.title {
				display: flex;
				align-items: center;
			}
		}
		.list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 0 !important;
			margin-top: 10rpx;
			&::after{
				content: '';
				display: block;
				width: 33%;
				visibility: hidden;
			}
			.item {
				flex-wrap: wrap;
				height: 322rpx;
				border-radius: 10rpx;
				image {
					width: 100%;
					height: 210rpx;
					margin-bottom: 6rpx;
					border-radius: 18rpx 18rpx 0 0;
					overflow: hidden;
					background-color: #f9f9f9;
				}
			}
		}
	}
}

	.server {
		.heads {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 85rpx;

			.title {
				display: flex;
				align-items: center;

				text {
					position: relative;

					&:nth-child(1) {
						font-size: 34rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #222222;
						line-height: 40rpx;
					}

					image {
						position: absolute;
						width: 200rpx;
						bottom: -6rpx;
						left: 20rpx;
					}
				}
			}

			.more {
				color: #AAAAAA;
				font-size: 24rpx;
			}
		}

	}
</style>
